<template>
    <div class="homePaper" v-loading="loading">
        <div class="banner">
            <el-row>
                <el-col :xs="24" :sm="0" :md="0" :lg="0" :xl="0">
                    <aspectRatio>
                        <el-carousel :interval="4000" style="height: 100%;overflow: hidden;">
                            <el-carousel-item v-for="(item, index) in banner" :key="index">
                                <el-image :src="item.src" style="width: 100%;z-index: 99;"></el-image>
                            </el-carousel-item>
                        </el-carousel>
                    </aspectRatio>
                </el-col>
                <el-col :xs="0" :sm="24" :md="24" :lg="24" :xl="24">
                    <el-carousel type="card" :interval="4000" style="height: 100%;overflow: hidden;">
                        <el-carousel-item v-for="(item, index) in banner" :key="index">
                            <el-image :src="item.src" style="width: 100%;z-index: 99;border-radius: 15px;"></el-image>
                        </el-carousel-item>
                    </el-carousel>
                </el-col>
            </el-row>
        </div>
        <div class="item" style="--bcolor: var(--t3color)">
            <div class="title t3">
                任务中心
            </div>
            <paperList :list="task.records" v-if="task"/>
        </div>
        <div class="item" style="--bcolor: var(--t1color)">
            <div class="title t1">
                固定试卷
            </div>
            <paperList :list="regular.records" v-if="regular"/>
        </div>
        <div class="item" style="--bcolor: var(--t2color)">
            <div class="title t2">
                时段试卷
            </div>
            <paperList :list="time.records" v-if="time"/>
        </div>
    </div>
</template>

<script>
    import { getPaperList } from '@/api/paper'
    import { mapState } from 'vuex'
    import paperList from '@/components/paper/paperList.vue'
    import aspectRatio from '@/components/base/aspectRatio.vue'
    export default {
        components : {
            paperList,
            aspectRatio
        },
        data() {
            return {
                regular : [],
                time : [],
                task : [],
                banner : [
                    {
                        src : 'https://pic.leetcode.cn/1672051517-bpQKao-%E7%AE%97%E6%B3%95%E8%AE%AD%E7%BB%83%E8%90%A5.png?x-oss-process=image%2Fformat%2Cwebp'
                    },
                    {
                        src : 'https://pic.leetcode.cn/1688727448-PrxtZy-Study%20Plane%20-%20Banner.png?x-oss-process=image%2Fformat%2Cwebp'
                    },
                    {
                        src : 'https://pic.leetcode.cn/1681889436-PUCPnR-%E9%A2%98%E5%BA%93.png?x-oss-process=image%2Fformat%2Cwebp'
                    },
                    {
                        src : 'https://pic.leetcode.cn/1679887663-UMEVAJ-%E9%A3%9E%E4%B9%A620230327-112733.png?x-oss-process=image%2Fformat%2Cwebp'
                    },
                ],
                loading : false
            }
        },
        computed : {
            ...mapState(['types'])
        },
        created(){
            this.getDate()
        },
        methods : {
            getDate(){
                this.loading = true
                for (let type in this.types) {
                    getPaperList({
                        status : 1,
                        type,
                        page : 1,
                        limit : 8
                    }).then(res => {
                        this.loading = false
                        if(res.code == 200){
                            this[type] = res.data
                        }
                    })
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
.homePaper{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    .banner{
        width: 100%;
        display: flex;
        justify-content: center;
        &>div{
            padding: 20px;
            width: 1200px;
        }
    }
    .item{
        max-width: 1200px;
        width: calc(100% - 20px);
        padding: 20px;
        .title{
            font-size: calc(0.5vw + 10px);
            font-weight: 900;
            margin-bottom: 10px;
            border-left: 10px solid var(--bcolor);
            padding: 5px 10px;
        }
    }
}
</style>